<template>
    <div class="page">
        <div class="breadcrumbBar">
            <el-breadcrumb separator="/"> 
                <el-breadcrumb-item>数据采集</el-breadcrumb-item>
                <el-breadcrumb-item>设备列表</el-breadcrumb-item>
            </el-breadcrumb> 
        </div>
        <div class="tableCard">
            <div class="tabToolbar">
                <div class="title">设备列表</div>
                <div class="filters">
                    <div class="item">
                        <el-select style="width:200px" v-model="pageState.sysId" @change="refresh">
                            <el-option v-for="item in dicts.syses" :key="item.sysId" :label="item.sysName" :value="item.sysId" />
                        </el-select>
                    </div>
                </div>                
                <div class="actions">
                    <el-space wrap>
                        <el-button @click="refresh" type="primary" plain><i class="fa fa-refresh btnicon"></i> 刷新</el-button> 
                        <el-button @click="acShowEdit( 0  )" type="primary" plain><i class="fa fa-plus btnicon"></i> 新建</el-button>  
                    </el-space>
                </div>
            </div>
            <div class="tabContainer">                
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="catePan">
                            <ul class="lstCate">
                                <li
                                    v-for = "(cate,cateInd) in dicts.deviceTypes" :key="cateInd" @click="pageState.deviceTypeIndex=cateInd; refresh();"
                                >
                                    <div :class="cateInd==pageState.deviceTypeIndex?'item active':'item'" >
                                        {{cate.dictName}}
                                    </div>
                                </li>
                            </ul>
                        </div> 
                    </el-col>
                    <el-col :span="21">
                        <el-table :data="tabDatas" stripe>
                            <el-table-column prop="deviceId" label="ID" width="70" />
                            <el-table-column prop="deviceCode" label="编号" width="180" />
                            <el-table-column prop="deviceName" label="名称" width="180" />  
                            <el-table-column  label="采集通道" width="200">
                                <template #default="scope"> 
                                    <el-select style="width:100%" v-model="scope.row.channelId" @change="onChangeInfo(scope.row ,'channelId')" >
                                        <el-option v-for="item in dicts.sysChannels" :key="item.channelId" :label="item.channelName" :value="item.channelId" />
                                    </el-select> 
                                </template>
                            </el-table-column>
                            <el-table-column prop="deviceDesc" label="备注" />
                            <el-table-column  label="操作" width="240">
                                <template #default="scope">
                                    <el-space wrap>
                                        <el-button link type="primary" size="small" @click.prevent="acShowEdit(scope.row.deviceId ,scope.row)">
                                            修改
                                        </el-button> 
                                        <el-button link type="danger" size="small" @click.prevent="acDelete(scope.row)">
                                            删除
                                        </el-button>  
                                    </el-space>
                                </template>

                            </el-table-column>
                        </el-table> 

                    </el-col>
                </el-row>
            </div> 
        </div>

        <el-dialog
            v-model="editDlg.status"
            title="设备列表"
            width="500"
            draggable
            overflow
            :close-on-click-modal="false"
        >
            <div class="editForm">
                <div class="edRow">
                    <div class="lab">编号</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.deviceCode"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">名称</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.deviceName"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">备注</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.deviceDesc"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">扩展属性</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.exInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                
                <div class="edBtnRow">
                    <el-button type="default" @click="editDlg.status=false"><i class="fa fa-reply btnicon"></i> 取消</el-button>
                    <el-button type="primary" @click="acPost"><i class="fa fa-save btnicon"></i> 保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {admin} from '../../admin';
    import { ElMessage, ElMessageBox } from 'element-plus';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return { 
                pageState:{
                    deviceTypeIndex : 0 ,
                    sysId :0 
                },
                pageStateKey : "zn_admin_collecting_device",
                dicts:{ 
                    deviceTypes:[],
                    syses:[],
                    channels:[] ,
                    sysChannels:[]
                },
                tabDatas:[],
                editDlg:{
                    status: false  ,
                    info:{},
                    rowId : 0 
                }
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        var dataKey = "admin/collecting/device/dict.txt";
                        var ps = {};
                        admin.api.query(dataKey , ps).then(_res=>{
                            me.dicts.deviceTypes = _res.datasetList[0];
                            me.dicts.syses = _res.datasetList[1];
                            me.dicts.channels = _res.datasetList[2];
                            console.log(me.dicts)
                            su();
                        }) ;
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    admin.api.setSessionObj( me.pageStateKey , me.pageState );
                    var dataKey = "admin/collecting/device/list.txt";
                    var ps = {
                        deviceTypeCode : me.getDeviceTypeCode() , 
                        sysId : me.pageState.sysId
                    };
                    admin.api.query(dataKey , ps).then(_res=>{ 
                        me.tabDatas = _res.recordset;
                        me.dicts.sysChannels = me.dicts.channels.filter( c=>{
                            return c.sysId == me.pageState.sysId;
                        })
                        console.log('device' , me.tabDatas)
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            getDeviceTypeCode(){
                var me = this;
                var res = "";
                try {
                    res = me.dicts.deviceTypes[me.pageState.deviceTypeIndex].dictCode;
                } catch (error) {
                    console.log(error)
                }
                return res;
            },
            acShowEdit(rowId,row){
                var me = this;
                try {
                    me.editDlg.rowId = rowId;                    
                    me.editDlg.info = rowId == 0 ? {
                        sysId : me.pageState.sysId ,
                        deviceTypeCode : me.getDeviceTypeCode() ,
                        deviceCode:"", 
                        deviceName:"",
                        deviceDesc:"",
                        exInfo:'{}'
                    }: row;
                    me.editDlg.status = true; 
                    console.log(me.editDlg)
                } catch (error) {
                    console.log(error)
                }
            },
            acPost(){
                var me = this;
                try {
                    var ps = {};
                    if( me.editDlg.rowId >0  ){
                        ps = JSON.parse(JSON.stringify(me.editDlg.info))
                        delete ps['deviceId']
                        admin.api.updateRow( "T_Device" , ps , {deviceId: me.editDlg.info.deviceId}).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    else{
                        ps = me.editDlg.info;
                        admin.api.createRow( "T_Device" , ps  ).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    
                } catch (error) {
                    console.log(error)
                }
            },
            acDelete(row){
                var me = this;
                try {
                    var msg = "是否确定要删除当前设备？";
                    ElMessageBox.confirm(
                        msg,
                        '删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => { 
                        var ps = {
                            deviceId : row.deviceId 
                        };
                        admin.api.deleteRow( "T_Device" ,ps ).then(_=>{
                            me.refresh();
                        })
                    }).catch(() => { 
                    })
                } catch (error) {
                    console.log(error)
                }
            }, 
            onChangeInfo(row ,key){
                var me = this;
                try {
                    console.log(key , row)
                    var ps = {};
                    ps[key] = row[key];
                    admin.api.updateRow( "T_Device" , ps , {deviceId: row.deviceId}).then(_postRes=>{
                        if( _postRes.queryStatus ==0 ){
                            me.$message.error('提交失败！')
                        }
                        else{
                            me.refresh();
                            me.editDlg.status = false;
                        }
                    })
                } catch (error) {
                    console.log(error)
                }
            }, 
        }
    }
</script>

<style lang="less" scoped>
@import url('../../admin.less');
    .catePan{
        padding: 0px; 
        margin-right: 15px;
        ul.lstCate{
            li{
                border-bottom: 1px solid #f2f3f9;
                padding: 0px;
                .item{ 
                    width: 120px;
                    text-align: left;
                    padding: 5px 10px;
                    color: #797979;
                }
                .item:hover{
                    cursor: pointer;
                    color: #222;
                }
                .item.active{
                    background-color: #0077fe;
                    color: #fff;
                }

            }
        }
    }
</style>